<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>计划报表信息列表</title>
    <script src="/scripts/boot.js"></script>
    <script src="/scripts/res/third-party/echarts-4.1.0/echarts.js"></script>
    <style>
        html,body{
            margin:0;padding: 0;border:0;width:100%;height:100%;overflow:hidden;
        }
        body{
        	background: #ffffff!important;
            padding:20px;
        }
    </style>
</head>
<body>
<div class="title-list mb-20"><span class="title-listbg"></span><span>计划报表信息</span></div>
<div class="tab">
		<div class="tab-menu">
	         <ul>
	             <li class="change">列表</li>
	             <li>图表</li>
	         </ul>
	     </div>
		<div id="qForm"  class="mini-toolbar1" style="border-bottom:0;padding:0px;">
		    <table style="width:100%;">
		        <tr>
		            <td style="width:100%;">
		                <div class="mb-20 position-rel">
		                    <span class="search-title">区域</span>
		                    <div id="area" class="area"></div>
		                    <!-- <input id="provinceCombo" class="mini-combobox search-100px" textField="province" valueField="id" url="/province/listByItem" onvaluechanged="provinceChanged()" required="true">
		                    <input id="cityCombo" name="cityId" class="mini-combobox search-100px" textField="city" valueField="id" onvaluechanged="cityChanged()" required="true"> -->
		                    <span class="search-title search-ml60">公司名称</span><input name="affiliatedCompanyId" id="affiliatedCompanyId" class="mini-treeselect" style="width: 250px; margin-left: 10px;" showTreeIcon="true" valueField="id" textField="companyname"   parentField="parentid" expandOnLoad="true"/>
		                    <span class="search-title search-ml60">项目名称</span><input id = "name" name="name" class="mini-textbox search-200px"   value="">
		                    <a class="add-botton search-ml60" onclick="list.search()">查询</a>
		                    <a class="resetting-btn search-ml20" onclick="list.reset()">重置</a>
		                </div>
		            </td>
		        </tr>
		    </table>
		</div>
		<div id="info" >
			<div ><span id="alltask">12</span>个，全部任务</div>
			<div ><span id="unfinish">1</span>个，未完成</div>
			<div ><span id="overdueNo">2</span>个，逾期任务</div>
			<div ><span id="overdueDate">8</span>天，逾期时间</div>
			<div ><span id="finish">11</span>个，已完成</div>
			<div ><span id="participatorNo">8</span>人，参与人数</div>
			<div ><span id="leaderNo">3</span>人，负责人</div>
		
		</div>
     
        <div class="tab-box">
            <div class="div_chose">
            	<!--<div class="mini-fit">-->
				    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:95%;"  url="/planNode/countlistByPage" sizeList="[5,10,20,50]" pageSize="20" idField="user_id"  multiSelect="true">
				         <div property="columns">
				            <div type="checkcolumn" headerAlign="center" align="center"></div>
				            <div type="indexcolumn" headerAlign="center" align="center">序号</div>
				            <div field="name" width="120" headerAlign="center" allowSort="true">计划名称</div>
				            <div field="value" width="120" headerAlign="center" allowSort="true">阶段</div>
				            <div field="important" width="120" headerAlign="center" allowSort="true">关键节点个数</div>
				            <div field="tasks" width="120" headerAlign="center" allowSort="true">全部任务</div>
				            <div field="doing" width="120" headerAlign="center" allowSort="true">未完成</div>
				            <div field="overTasks" width="120" headerAlign="center" allowSort="true">逾期任务数</div>
				            <div field="overDay" width="120" headerAlign="center" allowSort="true">逾期时间（天）</div>
				            <div field="ended" width="120" headerAlign="center" allowSort="true">已完成</div>
				            <div field="managerNo" width="120" headerAlign="center" allowSort="true">参与人数（人）</div>
				            <div field="managerName" width="120" headerAlign="center" allowSort="true">负责人</div>
				        </div>
				    </div>
            </div>
		 <div class="div_chose">
		        <div class="col-lg-4 col-sm-4 col-xs-4 col-sm-4">
		            <div id="showChart"
		                style="width: 30%; height: 200px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
		        </div>
		        <div class="col-lg-4 col-sm-4 col-xs-4 col-sm-4">
		            <div id="showChart1"
		                style="width: 30%; height: 200px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
		        </div>
		        <div class="col-lg-4 col-sm-4 col-xs-4 col-sm-4">
		            <div id="showChart2"
		                style="width: 30%; height: 200px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
		        </div>
		        <div class="col-lg-4 col-sm-4 col-xs-4 col-sm-4">
		            <div id="showChart3"
		                style="width: 30%; height: 200px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
		        </div>
		        <div class="col-lg-4 col-sm-4 col-xs-4 col-sm-4">
		            <div id="showChart4"
		                style="width: 30%; height: 200px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
		        </div>
		        <div class="col-lg-4 col-sm-4 col-xs-4 col-sm-4">
		            <div id="showChart5"
		                style="width: 30%; height: 200px; margin-left: 0px; margin-right: 6px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
		        </div>
		        </div>
		
		    </div>
	</div>

<script type="text/javascript">
mini.parse();
common.area.init("#area");
common.company();
var optionbar = {
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    legend: {
			        data:['未完成','已完成']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			            type : 'category',
			            data : ['周一','周二','周三','周四','周五','周六','周日']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    color:['#3385ff','#dfdfdf','#a6db69','#ffd454','#ffa361','#d1d1d1'],
			    series : [
			        {
			            name:'未完成',
			            type:'bar',
			            stack: '总数',
			            data:[220, 182, 191, 234, 290, 330, 310]
			        },
			        {
			            name:'已完成',
			            type:'bar',
			            stack: '总数',
			            data:[150, 232, 201, 154, 190, 330, 410]
			        },
			    ]
			};

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['正常', '逾期', '未设置']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    color:['#3385ff','#dfdfdf','#a6db69','#ffd454','#ffa361','#d1d1d1'],
    series: [
        {
            name: '正常',
            type: 'line',
            areaStyle: { normal: {} },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '逾期',
            type: 'line',
            areaStyle: { normal: {} },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '未设置',
            type: 'line',
            areaStyle: { normal: {} },
            data: [150, 232, 201, 154, 190, 330, 410]
        }
    ]
};
function buildChart() {
    var chart = echarts.init(document.getElementById('showChart'));
    chart.setOption(optionbar);
    var chart1 = echarts.init(document.getElementById('showChart1'));
    chart1.setOption(option);
    var chart2 = echarts.init(document.getElementById('showChart2'));
    chart2.setOption(option);
    var chart3 = echarts.init(document.getElementById('showChart3'));
    chart3.setOption(option);
    var chart4 = echarts.init(document.getElementById('showChart4'));
    chart4.setOption(option);
    var chart5 = echarts.init(document.getElementById('showChart5'));
    chart5.setOption(option);
}
buildChart();
///////////////////////////////////////////////////////////////
$(".tab-menu li").on('click',function(){
    //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
        var _index = $(this).index();
    //让内容框的第 _index 个显示出来，其他的被隐藏
       $(".tab-box>div").eq(_index).show().siblings().hide();
    //改变选中时候的选项框的样式，移除其他几个选项的样式
    $(this).addClass("change").siblings().removeClass("change");
    if(_index==0){

    }
});
</script>
</body>
</html>